<template>
  <view class="content">
    <view class="header">
      <text class="title">原生组件示例</text>
    </view>
    
    <view class="container">
      <!-- 基础组件示例 -->
      <view class="section">
        <text class="section-title">基础组件</text>
        <view class="component-item">
          <button type="primary" @click="handleClick">点击按钮</button>
        </view>
        
        <view class="component-item">
          <input v-model="inputValue" placeholder="请输入内容" class="input" />
          <text class="input-value">输入值：{{ inputValue }}</text>
        </view>
      </view>
      
      <!-- 表单组件示例 -->
      <view class="section">
        <text class="section-title">表单组件</text>
        <view class="component-item">
          <radio-group @change="onRadioChange">
            <label class="radio-item" v-for="item in radioItems" :key="item.value">
              <radio :value="item.value" :checked="item.checked" />
              <text>{{ item.name }}</text>
            </label>
          </radio-group>
        </view>
        
        <view class="component-item">
          <checkbox-group @change="onCheckboxChange">
            <label class="checkbox-item" v-for="item in checkboxItems" :key="item.value">
              <checkbox :value="item.value" :checked="item.checked" />
              <text>{{ item.name }}</text>
            </label>
          </checkbox-group>
        </view>
      </view>
      
      <!-- 选择器示例 -->
      <view class="section">
        <text class="section-title">选择器</text>
        <view class="component-item">
          <picker mode="selector" :range="selectorRange" @change="onSelectorChange">
            <view class="picker">
              <text>当前选择：{{ selectorRange[selectorIndex] }}</text>
            </view>
          </picker>
        </view>
      </view>
      
      <!-- 进度条示例 -->
      <view class="section">
        <text class="section-title">进度条</text>
        <view class="component-item">
          <progress :percent="progressPercent" show-info />
          <view class="progress-controls">
            <button size="mini" @click="decreaseProgress">减少</button>
            <button size="mini" @click="increaseProgress">增加</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 响应式数据
const inputValue = ref('')
const selectorIndex = ref(0)
const progressPercent = ref(50)

// 单选框数据
const radioItems = ref([
  { value: '1', name: '选项1', checked: true },
  { value: '2', name: '选项2', checked: false },
  { value: '3', name: '选项3', checked: false }
])

// 复选框数据
const checkboxItems = ref([
  { value: 'A', name: '选项A', checked: true },
  { value: 'B', name: '选项B', checked: false },
  { value: 'C', name: '选项C', checked: false }
])

// 选择器数据
const selectorRange = ref(['北京', '上海', '广州', '深圳', '杭州'])

// 方法
const handleClick = () => {
  uni.showToast({
    title: '按钮被点击了',
    icon: 'none'
  })
}

const onRadioChange = (e) => {
  const value = e.detail.value
  radioItems.value.forEach(item => {
    item.checked = item.value === value
  })
  
  uni.showToast({
    title: `选择了：${value}`,
    icon: 'none'
  })
}

const onCheckboxChange = (e) => {
  const values = e.detail.value
  checkboxItems.value.forEach(item => {
    item.checked = values.includes(item.value)
  })
  
  uni.showToast({
    title: `选择了：${values.join(', ')}`,
    icon: 'none'
  })
}

const onSelectorChange = (e) => {
  selectorIndex.value = e.detail.value
}

const increaseProgress = () => {
  progressPercent.value = Math.min(100, progressPercent.value + 10)
}

const decreaseProgress = () => {
  progressPercent.value = Math.max(0, progressPercent.value - 10)
}
</script>

<style scoped>
.content {
  padding: 20rpx;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.section {
  margin-bottom: 40rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.component-item {
  margin-bottom: 30rpx;
}

.component-item:last-child {
  margin-bottom: 0;
}

.input {
  border: 1rpx solid #ddd;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.input-value {
  font-size: 28rpx;
  color: #666;
}

.radio-item, .checkbox-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.radio-item radio, .checkbox-item checkbox {
  margin-right: 20rpx;
}

.picker {
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
}

.progress-controls {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  margin-top: 20rpx;
}
</style>